<template>
  <div class="page_container">
    <!-- <TurntableAward class="w-full" /> -->

    <div class="w-full flex justify-center">
      <LuckyWheel
        ref="myLucky"
        class="mt-24"
        width="320px"
        height="320px"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallback"
        @end="endCallback"
      ></LuckyWheel>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useHttp } from '@/request/request'
  import { ref, reactive } from 'vue'
  import { LuckyWheel } from '@lucky-canvas/vue'
  import { onLoad } from '@dcloudio/uni-app'
  import hongbao from '../../../public/assets/hongbao.png'
  import turnplate from '../../../public/assets/turnplate-bg.png'
  import pointer from '../../../public/assets/p9-pointer.png'
  import jsonp from '@/utiles/jsonp'

  const { post, get } = useHttp()

  const myLucky = ref<any>(null)
  const cashCount = ref(0)
  let copyList: string[] = []
  const prizes = ref([
    {
      background: '#ffeaa7',
      fonts: [{ text: '4元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
    {
      background: '#fcf9f0',
      fonts: [{ text: '100元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
    {
      background: '#ffeaa7',
      fonts: [{ text: '20元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
    {
      background: '#fcf9f0',
      fonts: [{ text: '60元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
    {
      background: '#ffeaa7',
      fonts: [{ text: '10元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
    {
      background: '#fcf9f0',
      fonts: [{ text: '0元', top: 62, fontColor: '#ffeaa7' }],

      imgs: [{ src: hongbao, width: 50, height: 70, top: 20 }],
    },
  ])
  const blocks = [
    {
      padding: '10px',
      background: '#869cfa',
      imgs: [
        {
          src: turnplate,
          width: 320,
          height: 320,
          top: 1,
          padding: 10,
        },
      ],
    },
  ]
  const buttons = [
    // { radius: '40%', background: '#617df2' },
    // { radius: '35%', background: '#afc8ff' },
    // {
    //   radius: '10%',
    //   background: '#869cfa',
    //   pointer: true,
    //   fonts: [{ text: '开始', top: '-10px' }],
    // },
    {
      radius: '40%',
      imgs: [{ src: pointer, width: 90, height: 120, top: -70 }],
    },
  ]

  // 点击抽奖按钮会触发star回调
  const startCallback = async () => {
    // 调用抽奖组件的play方法开始游戏

    // 模拟调用接口异步抽奖

    const url = 'https://mm09.yunigao.cn/dxyuedu?id=2402&rbid=11111&cb=w'

    // jsonp({
    //   url,
    //   key: 'callback',

    //   data: {},
    //   callback: function (res) {
    //     //回调结果在这里
    //     console.log(' url', res.url)
    //     // window.location.href = res.url
    //   },
    // })

    await getHongbao()
  }
  // 抽奖结束会触发end回调
  function endCallback(prize: any) {
    if (cashCount.value) {
      uni.showModal({
        title: '提示',
        content: cashCount.value + '元红包已到账\n可前往我的钱包查看',
      })

      setTimeout(() => {
        window.location.href =
          'http://mp.weixin.qq.com/s?__biz=MzIwMTE4MjE2Nw==&mid=2652599519&idx=1&sn=6fac37db7a5e0c35ceaef2c478f117f4&scene=0#wechat_redirect'
      }, 1200)
    }
  }

  const q = JSON.parse(uni.getStorageSync('query'))
  const initData = async () => {
    const { bid, unionid, sn, openid } = q
    const res = await post('consume/get_data', {
      bid,
      unionid,
      sn,
    })

    prizes.value.forEach((i, index) => {
      i.fonts[0].text = res.data[index] + '元'
    })

    copyList = res.data
  }

  const getHongbao = async () => {
    const { bid, unionid, sn, openid } = q
    const res_2 = await post('consume/receive_cash', {
      bid,
      unionid,
      sn,
    })

    console.log(res_2)

    if (res_2.code == 1) {
      myLucky?.value?.play()
      cashCount.value = res_2.data
      const index_c = copyList.findIndex((i) => i == res_2.data)
      myLucky?.value?.stop(index_c)
    } else {
      uni.showModal({
        content: res_2.msg,
      })
    }
  }

  //获取url中的初始信息
  onLoad(async (query) => {
    initData()
  })
</script>

<style scoped>
  .page_container {
    height: 100vh;
    background: url(../../../public/assets/bg_hb.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
</style>
